
; (function () {

    //             100/ 350=400/800  
    //1.  小区域=(大区域/大图)*小图
    //正比公式 大区域/小区域=大图/小图
    //    
    $.fn.extend({
        zoom() {
            let self = this;
            let w = this.find(".bigArea").outerWidth() / this.find(".bigImg").outerWidth() * this.find(".middleImg").outerWidth();
            this.find(".middleArea").css("width", w);

            let h = this.find(".bigArea").outerHeight() / this.find(".bigImg").outerHeight() * this.find(".middleImg").outerHeight();
            this.find(".middleArea").css("height", h);

            //比例
            let oScore = this.find(".bigArea").width() / this.find(".middleArea").width()

            //进入要显示
            this.find(".middleImg").on("mouseenter", function () {
                self.find(".middleArea").show();
                self.find(".bigArea").show();
            }).on("mouseleave", function () {
                self.find(".middleArea").hide();
                self.find(".bigArea").hide();
            })

            this.find(".middleImg").on("mousemove", function (e) {
                var disX = e.pageX - self.find(".middleImg").offset().left - self.find(".middleArea").width() / 2;
                var disY = e.pageY - self.find(".middleImg").offset().top - self.find(".middleArea").height() / 2;
                if (disX <= 0) {
                    disX = 0
                }
                if (disY <= 0) {
                    disY = 0
                }

                var maxX = self.find(".middleImg").outerWidth() - self.find(".middleArea").outerWidth()
                var maxY = self.find(".middleImg").outerHeight() - self.find(".middleArea").outerHeight()
                if (disX > maxX) {
                    disX = maxX;
                }
                if (disY > maxY) {
                    disY = maxY;
                }


                self.find(".middleArea").css({
                    left: disX,
                    top: disY,
                })

                self.find(".bigImg").css({
                    left: oScore * disX * -1,
                    top: oScore * disY * -1,
                })

            })

            //事件委托
            //this.find(".small li").on("mousemove", function () {
            /* var index = $(this).index()
            /* self.find(".middleImg  img").attr("src", `images/images1/${index + 1}_2.jpg`);
            self.find(".bigImg").attr("src", `images/images1/${index + 1}_3.jpg`); */


            //self.find(".middleImg  img").attr("src", `images/images1/${index + 1}_2.jpg`);
            //self.find(".bigImg").attr("src", `images/images1/${index + 1}_3.jpg`);
            //})
        }


    })

    $(function () {

        $("#btn").on("click", function () {
            var num = $(this).prev().val();
            console.log(num);
            num++;
            $(this).prev().val(num);
            /*  var price = $(this).parent().prev().html().substring(1);
             //小计
             var result = calPrice(num, price);
             $(this).parent().next().html('&yen;' + result);
             TotalPrice();
             console.log(this); */
        })


        $("#btn1").on("click", function () {
            var num = $(this).next().val();
            if (num == 1) {
                //判断删除
                var flag = confirm('东西这么好  不要了吗吊毛？');
                if (flag) {
                    $(this).parent().parent().remove();
                }
            } else {
                num--;
                //更新赋值
                $(this).next().val(num);
                /* //单价  price
                var price = $(this).parent().siblings('.price').html().substring(1);
                var result = calPrice(num, price);
                //更新赋值
                $(this).parent().next().html('&yen;' + result); */
            }


        })
    })

})();



$(window).load(function () {
    $("#box").zoom()
})
